<script setup lang="ts">
definePageMeta({
  layout: 'index-page-layout'
})
const orderList: Ref<OrderPO[]> = ref([])
let load: any = null
onMounted(function (): void {
  barTitleStore().setTitle('司机端 - 我的订单')
  load = showLoadingToast({
    message: '加载中',
    duration: 0
  })
  cFetch<OrderPO>('/order/api/list', {
    auth: true,
    defaultOpts: {
      method: 'POST',
      body: {
        role: '1'
      }
    }
  }).then(res => {
    orderList.value = res.data
    load.close()
  }).catch(err => {
    console.log(err)
    load.close()
  })
})
onUnmounted(function (): void {
  if (load) load.close()
})
function goChat(userAlias: string,passengerStrokeId:string) {
  navigateTo({
    path:`${useRoute().path}/chat`,
    query:{
      tripId:passengerStrokeId,
      userAlias:userAlias
    }
  })
}
function confirmFee(order:OrderPO){
  cFetch(`/payment/api/confirmPay/${order.id}`,{
    auth: true,
    defaultOpts: {
      method: 'POST',
    }
  }).then(res => {
    if(res.code===200){
      showToast('确认收款成功')
      order.status=2
    }
  })
}
</script>

<template>
  <div class="container">
    <BaseOrderCard
        v-for="item in orderList"
        :name="item.passengerUseralias"
        :status=item.status
        :start-addr="item.passengerStartAddr"
        :end-addr="item.passengerEndAddr"
        :fee="item.cost"
        who="乘客昵称"
        :date="new Date(item.passengerStartDate as string)"
    >
      <template #bottom>
        <span v-if="item.status===1" style="color: RGB(51,136,204);font-weight: bolder" @click="confirmFee(item)">到款确认</span>
        <span style="color: RGB(51,136,204);font-weight: bolder;margin-left: 20px" @click="goChat(item.passengerUseralias,item.passengerStrokeId)">联系ta >></span>
      </template>
    </BaseOrderCard>
    <van-empty v-if="orderList.length===0" description="这里空空如也~" />
  </div>


</template>

<style scoped>
.container {
  width: 100vw;
  margin: 14px 0 0;
}

</style>